<template class="content">
	<view>
		<view class="top">
			<p>积分规则</p>
		</view>
		<!-- 积分怎么花 -->
		<view class="box">
			<view class="nav-jf">
				<p>积分该怎么花？</p>
			</view>
			<view class="exchange">
				<p>使用积分兑换商品</p>
			</view>
			<view class="picexchange">
				<image src="../../static/integralrule/5gouwudai2.png" mode=""
					style="height: 80rpx;width: 80rpx;margin-top: 10rpx;"></image>
				<view class="textA">
					<p>兑换成现金</p>
					<span>100积分兑换100金额，兑换成功后，可以在我的钱包查看</span>
				</view>
			</view>
			<view class="picexchange">
				<image src="../../static/integralrule/wodeqianbao.png" mode=""
					style="height: 80rpx;width: 80rpx;"></image>
				<view class="textA">
					<p>抵扣下单金额</p>
					<span>下单时100积分抵扣100金额</span>
				</view>
			</view>
		</view>
		<!-- 常见问题 -->
		<view class="boxB">
			<view class="nav-qus">
				<p>常见问题</p>
			</view>
			<view class="titleQus">
				<p>1.积分状态</p>
				<view class="content">
					<p>积分分为收入，支出2个状态。</p>
					<p>收入：指的是通过所有渠道获得的积分</p>
					<p>支出：指的是消耗的积分</p>
				</view>
			</view>
			<view class="titleQus">
				<p>1.积分有效期</p>
				<view class="content">
					<p>永久有效</p>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
</script>

<style lang="scss" scoped>
	.top {
		height: 170rpx;
		background-image: linear-gradient(90deg, #6b6c85, #3a4053);
		display: flex;
		justify-content: center;
		align-self: center;
	}

	.top p {
		font-size: 35rpx;
		color: white;
		align-self: center;
	}

	.box,
	.boxB {
		height: 500rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
	}

	.boxB {
		margin-top: 60rpx;
	}

	.nav-jf {
		height: 60rpx;
		background-image: linear-gradient(90deg, #6b6c85, #3a4053);
		width: 300rpx;
		border-radius: 0rpx 40rpx 40rpx 0rpx;
	}

	.nav-qus {
		height: 60rpx;
		background-image: linear-gradient(90deg, #6b6c85, #3a4053);
		width: 200rpx;
		border-radius: 0rpx 40rpx 40rpx 0rpx;
	}

	.nav-jf p {
		color: white;
		font-size: 33rpx;
		text-align: center;
		font-weight: 600;
		line-height: 60rpx;
	}

	.nav-qus p {
		color: white;
		font-size: 33rpx;
		text-align: center;
		font-weight: 600;
		line-height: 60rpx;
	}

	.exchange {
		border-left: 10rpx solid #64667e;
		;
		margin-left: 30rpx;
	}

	.exchange p {
		color: #64667e;
		;
		font-size: 30rpx;
		margin-left: 30rpx;
		font-weight: 600;
	}

	.picexchange {
		display: flex;
		width: 80%;
		align-self: center;
	}

	.textA {
		margin-left: 20rpx;
	}

	.textA p {
		font-size: 29rpx
	}

	.textA span {
		font-size: 25rpx;
		color: #6b6c85;
	}

	.titleQus {
		margin: 30rpx;
	}

	.titleQus p {
		font-weight: 600;
		font-size: 30rpx;
		color: #64667e;
		;
	}

	.content p {
		font-weight: normal;
		font-size: 28rpx;
		margin: 15rpx 25rpx;
	}
</style>